import React, { useState, useEffect } from 'react';
import { ModuleHeader, ModuleCharts, ModalProject } from '../components';
import { CaretDownOutlined } from '#/utils/antdIcons';
import { operateIndex } from '@/services/businessAnalysis';
import { queryDataPower } from '@/services/user';
import { HttpCode } from '#/utils/contacts.js';
import { Spin } from 'antd';
import { powersDataType } from '#/utils/userHelper';
import { TRDefault } from '@/components';
import PropTypes from 'prop-types';
import styles from './index.less';

const ManagementIndex = (props) => {
  const {
    code,
    title,
    dateObj: { startDate, endDate },
    type,
  } = props;

  const [powerLoading, setPowerLoading] = useState(true);
  const [centerList, setCenterList] = useState([]);
  const [modalResult, setModalResult] = useState({});

  useEffect(() => {
    getQueryDataPower();
  }, []);

  const getQueryDataPower = async () => {
    setPowerLoading(true);
    const res = await queryDataPower(code);
    if (res && res.statusCode === HttpCode.SUCCESS) {
      setPowerLoading(false);
      let powerObj = {};
      Object.keys(powersDataType).forEach((item) => {
        const array = res.powers.filter((n) => n.type === powersDataType[item]);
        if (array.length > 0) {
          powerObj[item] = array[0].json || [];
        }
      });
      let centerList = [];
      const arr = powerObj?.dept?.manageList || [];
      // 中心 => 区域 => 场站 => 项目
      arr.map((x) => {
        if (x.label === '总部') {
          centerList = centerList.concat(x.children.filter((x) => x.label === '中心'));
        } else if (x.label === '中心') {
          centerList.push({ ...x });
        }
      });
      setCenterList(centerList);
      setModalResult({
        selectType: '中心',
        selectIds: centerList.map((x) => x.area),
        selectName: '中心：全部',
      });
    }
  };

  const handleOpenCenter = async () => {
    if (!centerList.length) return;
    const { index, ...pars } = await ModalProject.show(centerList);
    index == 1 && setModalResult(pars);
  };

  return (
    <div className={styles.managementWrap}>
      <ModuleHeader title={title}>
        {!powerLoading && (!centerList || !centerList.length) ? null : (
          <div className={styles.selectCenter} onClick={() => handleOpenCenter()}>
            <span>{modalResult.selectName}</span>
            <span>
              <CaretDownOutlined style={{ fontSize: '12px', marginLeft: '7px' }} />
            </span>
          </div>
        )}
      </ModuleHeader>
      {powerLoading ? (
        <Spin spinning={powerLoading} style={{ width: '100%', height: 300, marginTop: 30 }} />
      ) : !powerLoading && (!centerList || !centerList.length) ? (
        <div className={styles.powerEmpty}>
          <TRDefault type="lock" />
        </div>
      ) : (
        <div className={styles.moduleChartDiv}>
          {modalResult.selectType && (
            <ModuleCharts
              startDate={startDate}
              endDate={endDate}
              type={code}
              dateType={type}
              queryAction={operateIndex}
              height={{ height: 300 }}
              searchData={{
                type,
                startDate,
                endDate,
                selectType: modalResult.selectType,
                selectIds: modalResult.selectIds,
              }}
            />
          )}
        </div>
      )}
    </div>
  );
};

ManagementIndex.propTypes = {
  code: PropTypes.string,
  title: PropTypes.string,
  dateObj: PropTypes.object,
  type: PropTypes.string,
};

export default ManagementIndex;
